import React from 'react';
import styled, { keyframes } from 'styled-components';
import StyleFooter from './StyleFooter';
import StyleInput from './StyleInput';
import Child from './Child';

import './css/child.css';

// 扩展
const StyleFooterExt = styled(StyleFooter)`
  background-color: yellow;
`;

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const StyledChild = styled(Child)`
  background-color: red;
  height: 150px;
`;

const StyleAnimate = styled.div`
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: red;
  animation: ${rotate360} 5s linear infinite;
`;

const App = () => {
  return (
    <div>
      <h1>App</h1>
      <div>
        <StyleInput
          type="text"
          name="username"
          placeholder="用户名"
        />
        <StyleInput
          type="password"
          name="password"
          placeholder="密码"
        />
      </div>
      <div>
        <StyleFooter myHeight="200px" />
        <StyleFooter
          myHeight="300px"
          myBackground="blue"
        />
        <StyleFooterExt
          myHeight="100px"
          myBackground="blue"
        />
      </div>
      <div>
        <StyleAnimate />
      </div>
      <div>
        <Child className="child" />
        <StyledChild />
      </div>
    </div>
  );
};

export default App;
